iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Mobile Development

聽說 HackMD 開放 API 串接,那麼用 Kotlin 寫個筆記 App 吧!系列 第 10

111/10 - 視覺規劃(2/3) - 應用程式圖示和內建圖示

  • 分享至 

  • xImage
  •  

開頭

個人習慣開始寫程式之前,先設計應用程式圖示,這樣好處是方便找,才不會每個應用程式都長的一樣,不好辨識

現在的 Material 設計規範中,會要求每個按鈕都要有個圖示,不要都是文字,但自己畫又很麻煩,但現在沒這個困擾了,因為 Android Studio 已經幫我們畫好很多圖示,只要去選就行

db 格式

安卓螢幕規格那麼多,如果要在程式中顯示一張圖,在大螢幕可能會因為解析度不足很模糊,在小螢幕則是浪費系統資源讀取一張大圖,所以安卓把圖片切成很多大小,只要有放對,系統會自己去取得最適當的圖片

1dp對應到在160dpi螢幕上的幾個 px(像素)

名稱 dpi iOS圖片規格 建議ICON大小 螢幕解析度多少會使用
QVGA ldpi 120 0.75X 320x240
HVGA mdpi 160 1X 48x48 480x320
WVGA hdpi 240 1.5X 72x72 800x480
720P xhdpi 320 2X 96x96 1280x720
1080P xxhdpi 480 3X 144x144 1920x1080
4K xxxhdpi 640 4X 192x192 3840x2160

Android Studio 建立應用程式圖示

開啟 Image Asset 工具

  1. res 右鍵
  2. new 左鍵
  3. Image Asset 左鍵
    https://ithelp.ithome.com.tw/upload/images/20220924/20124384tZpKnMZfoC.png

設定 Image Asset 工具

從上到下解說

  1. Icon Type、Name、Layer Name,不用調整
  2. Asset Type
    1. Image:使用圖片做為應用程式圖示
    2. Clip Art:使用 Android Studio 內建的 SVG 圖片做為應用程式圖示
    3. Text:使用文字做為應用程式圖示
  3. Trim,不用調整
  4. Resize:顯示大小
  5. 都設定完後點下方藍色的 Next
    https://ithelp.ithome.com.tw/upload/images/20220924/20124384tXx5ezCUqj.png
  6. 會看到預覽圖和預計建立的檔案
  7. 左鍵點擊下方藍色的 Finish,就完成囉
    https://ithelp.ithome.com.tw/upload/images/20220924/20124384DaG7Ms2iEM.png

Android Studio 內建圖示

開啟 Vector Asset 工具

  1. res 右鍵
  2. new 左鍵
  3. Vector Asset 左鍵
    https://ithelp.ithome.com.tw/upload/images/20220924/20124384urzDJ8ElU0.png

設定 Vector Asset 工具

  1. Asset Type
    1. Clip Art:內建圖示,我們選這個
    2. Local file:匯入 SVG 圖檔,轉換成安卓可以用的樣式
  2. Name:圖片檔案名稱
  3. Clip Art:左鍵點擊可以選自己要的圖片
  4. Size:設定圖片大小,可以不管他
  5. Color:圖片顏色
  6. Opaticy:圖片透明度
  7. 選完圖片和設定好顏色後點下方藍色的 Next
    https://ithelp.ithome.com.tw/upload/images/20220924/201243843CSyk9dVGo.png
  8. 這邊是跟你說圖片存在那裡,直接點 Finish 就好
    https://ithelp.ithome.com.tw/upload/images/20220924/20124384x1twI3sMG5.png

上一篇
111/09 - 視覺規劃(1/3) - 深淺色模式和隱藏 Toolbar
下一篇
111/11 - 視覺規劃(3/3) - 建立啟動頁
系列文
聽說 HackMD 開放 API 串接,那麼用 Kotlin 寫個筆記 App 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言